/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * 个人信息
 */
import React, {Component} from "react";
import {
    StyleSheet,
    TouchableOpacity,
    Dimensions,
    Image,
    View,
    ToastAndroid,
    ScrollView,
    Button,
    Text,
    TextInput
} from "react-native";
import Separator from "../widget/Separator";
import ShareAlertDialog from "../widget/dialog/ShareAlertDialog";
import PayAlertDialog from "../widget/dialog/PayAlertDialog";
import ItemCell from "../widget/ItemCell";
import ClosableModal from "rn-closable-modal";
const {width} = Dimensions.get('window').width;
type Props = {
    navigation:any,
}
export default class UserinfoPage extends Component<State,Props> {

    //构造函数
    constructor(props) {
        super(props);
        this.state = {
            showModal: false,
            showSharePop: false,//分享弹窗，默认不显示
            showPayPop: false,//支付弹窗，默认不显示
        };
    }

    _onModalClosed = () => {
        this.setState({showModal: false})
    };

    selectConfirm() {

        this.setState({showModal: false})

    }

    selectCancel() {

        this.setState({showModal: false})

    }


    renderView() {
        return (
            <ScrollView>
                <View style={{flex:1,backgroundColor:'#f3f3f3'}}>
                    <TouchableOpacity onPress={() => this.setState({showModal: true})}>
                        <ItemCell title='确认弹窗'/>
                    </TouchableOpacity>
                    <Separator/>
                    <TouchableOpacity onPress={() => this.setState({showSharePop: true})}>
                        <ItemCell title='分享弹窗'/>
                    </TouchableOpacity>
                    <Separator/>
                    <TouchableOpacity onPress={() => this.setState({showPayPop: true})}>
                        <ItemCell title='支付弹窗'/>
                    </TouchableOpacity>

                    <ClosableModal
                        show={this.state.showModal}
                        onClose={this._onModalClosed}
                        overlayColor={"rgba(0,0,0,0.5)"}
                    >
                        <View style={{alignItems:"center",}}>
                            <Image
                                style={{width:51,height:51,alignItems:'center',position:'relative',borderRadius:25.5}}
                                source={require('../../res/img/dialog/tanhao.png')}/>
                            <View style={{marginTop:-25}}>
                                <View style={styles.mymodal}>
                                    <View style={styles.control_btn}>
                                        <Text style={styles.inputTitle}>刚刚编辑好，真的要删除嘛</Text>
                                        <Text style={styles.inputContent}>PLEASE ENTER YOUR RECEIVERING ADDRESS</Text>
                                        <View
                                            style={{flexDirection:'row',marginTop:18,alignItems:'center',justifyContent:'center'}}>

                                            <TouchableOpacity ref='cancel_btn' style={styles.touch_select_opacity}
                                                              onPress={() => this.selectCancel()}>
                                                <Text style={styles.touch_un_select_text}>取消</Text>
                                            </TouchableOpacity>

                                            <TouchableOpacity ref='confirm_btn' style={styles.touch_un_select_opacity}
                                                              onPress={() => this.selectConfirm()}>
                                                <Text style={styles.touch_select_text}>确定</Text>
                                            </TouchableOpacity>

                                        </View>
                                    </View>
                                </View>
                            </View>
                            <Image
                                style={{width:51,height:51,alignItems:'center',position:'absolute',borderRadius:25.5}}
                                source={require('../../res/img/dialog/tanhao.png')}/>
                        </View>
                    </ClosableModal>

                    <Separator/>

                    <ShareAlertDialog show={this.state.showSharePop} closeModal={(show) => {
                          this.setState({showSharePop: show})
                            }} {...this.props}/>

                    <PayAlertDialog show={this.state.showPayPop} closeModal={(show) => {
                          this.setState({showPayPop: show})
                            }} {...this.props}/>

                </View>
            </ScrollView>
        )
    }

    render() {
        return (
            <View style={styles.flexStyle}>
                {this.renderView()}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    flexStyle: {
        flex: 1,
        width: width,
        flexDirection: 'column',
    },
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    mymodal: {
        backgroundColor: '#DB3843',
        height: 150,
        width: 260,
        alignItems: 'center',
        borderRadius: 20,
        position: 'relative'
    },
    inputTitle: {
        color: 'white',
        alignItems: 'center',
        fontSize: 13,
        fontWeight: 'bold',
        textAlign: 'center',
        justifyContent: 'center',
        marginTop: 8
    },
    inputContent: {
        color: '#767474',
        textAlign: 'center',
        justifyContent: 'center',
        alignItems: 'center',
        fontSize: 9,
    },
    control_btn: {
        backgroundColor: '#2B3543',
        height: 115,
        width: 261,
        borderBottomLeftRadius: 20,
        borderBottomRightRadius: 20,
        marginTop: 35
    },
    touch_un_select_opacity: {
        width: 110,
        marginLeft: 3,
        backgroundColor: '#252E3B',
        height: 34,
        borderRadius: 20,
        borderWidth: 1,
        borderColor: '#353D49',
        alignItems: 'center',
        justifyContent: 'center',
    },
    touch_un_select_text: {
        color: 'white',
        fontSize: 11,
    },
    touch_select_opacity: {
        width: 110,
        marginLeft: 3,
        backgroundColor: '#DB3843',
        height: 34,
        borderRadius: 20,
        borderWidth: 1,
        borderColor: '#DB3843',
        alignItems: 'center',
        justifyContent: 'center',
    },
    touch_select_text: {
        color: '#FAFAFA',
        fontSize: 11,
    },

});




